<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>测试前后端通信</title>
	<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<!--   设置一个文本框一个按钮，通过按钮触发点击事件，进行Java（Springboot)通信-->

	<input type="text" id="uid" name="uid" placeholder="请输入用户id">
<br>
    <input type="password" id="pwd" name="pwd" placeholder="请输入用户密码">
	<br>
	<button id="btn">点击提交</button>
    <div id="result"></div>

<!--	使用jQuery的ajax来异步提交-->
	<script>
		//声明jQuery程序的入口，并声明匿名函数作为程序的执行
		$(function (){

			//通过点击按钮来触发事件，在该事件中提交ajax请求
			//点击之后，在通过匿名函数来设置函数

			$("#btn").click(function (){
				//测试点击事件是否触发
				console.log("按钮被点击了！！！")

				//通过ajax的调用和java通信,参数是Json格式
				$.ajax({
					//通信地址
					url :"/api/user/login",

					//请求方式 get/post
					method :"post",

					//前端传递给后端的数据
					data :{
						uid: $("#uid").val(),
						pwd: $("#pwd").val()
					} ,

					//设置数据格式,后端给前端
					dataType :"json",

					//调用成功后，后端返回前端的数据，注入在res参数上
					success:function (res){
						$("#result").text(res.message);
					},

					//发送错误信息
					error:function (){
						$("#result").text("请求失败");
					}

				})


			})
		})

	</script>
</body>
</html>

